<template>
    <div class="scale-button" :class="{ active }" @mousedown.stop="handleMousedown" @touchstart.stop="handleTouchstart" @animationend="handleAnimationend">
        <slot>
            <MmvImage :src="src"></MmvImage>
        </slot>
    </div>
</template>

<script>
export default {
    name: 'ScaleButton',
    props: {
        src: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            active: false,
        };
    },
    methods: {
        handleMousedown() {
            if (!this.$store.state.app.MobileOS) {
                this.active = true;
            }
        },
        handleTouchstart() {
            if (this.$store.state.app.MobileOS) {
                this.active = true;
            }
        },
        handleAnimationend() {
            this.active = false;
            this.$debounce(() => {
                this.$emit('MmvTap');
            }, 110);
        },
    },
};
</script>

<style lang="scss" scoped>
.scale-button {
    user-select: none;
    &.active {
        animation: scale-button 0.1s linear,
            scale-button 0.1s linear alternate-reverse;
    }
}

@keyframes scale-button {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(0.9);
    }
}
</style>
